<template>
	<view class="container-root">
		<view class="invoice-lower">
			<view>
				<image class="invoice-image-up" src="/static/images/top.png" mode="aspectFill" ></image>
			</view>
			
			<view>
				<text class="lower-title">购买人:</text>
				<text>{{userInfo.userName}}</text>
			</view>			
		</view>
		<scroll-view class="table-content" scroll-x="true">
			<view class="div-table" v-for="(item,index) in billDetail">
				<view class="tr">
					<view class="td">商品编号</view>
					<view class="td">商品名称</view>
					<view class="td">服务期限</view>
					<view class="td">单价/元</view>
					<view class="td">总价/元</view>
				</view>
				<view class="tr">
					<view class="td">{{item.id}}</view>
					<view class="td">{{orderData.orderName}}</view>
					<view class="td">{{item.buyamount}}</view>
					<view class="td">{{item.permoney}}</view>
					<view class="td">{{item.totalmoney}}</view>
				</view>				
			</view>
		</scroll-view>
		
		<view class="invoice-lower">
			<view>
				<text class="lower-title">发票编号:</text>
				<text>{{orderData.orderId}}</text>
			</view>
			<view>
				<text class="lower-title">日期:</text>
				<text>{{orderData.payTime}}</text>
			</view>			
		</view>
		
		<view>
			<image class="invoice-image" src="/static/images/bot.png" mode="aspectFill" ></image>
		</view>
		
		
		
	
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'

	
	export default {		
		data() {
			return {
				orderID:'',
				orderData:'',
				billDetail:[]
			}
		},
		computed:{
			...mapState(['token', 'userInfo']), //对全局变量hasLogin进行监控
		},
		onLoad(options){
			uni.setNavigationBarTitle({
				title:"订单发票",
			});
			this.orderID = options.orderID;
			//console.log('orderID....');
			//console.log(options);
			//console.log(this.orderID);
			this.getOrderInfobyID(this.orderID);
		},
		methods: {
			getOrderInfobyID:function(id){
				var self = this;
				let params = {					
					orderId: id					
				};
				let options = {
					url:httpRequest.requestUrl.getOrderbyID,
					method:httpRequest.requestMethod.GET,
					datas:params
				}
				httpRequest.Request(options).then(res => {
					//console.log(res)
					if (res.data.status == 200) {
						self.orderData = res.data.content;
						for(var i =0; i < self.orderData.billDetail.length; i++){
							self.billDetail.push(self.orderData.billDetail[i]);
						}
						//console.log(self.orderData);
						//console.log(self.billDetail);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.table-content{
		width: 100%;
		margin-left: 40rpx;
	}
	.invoice-lower{
		height: 100%;
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 18rpx;
		margin-top: 20rpx;
	}
	.lower-title{
		font-weight: bold;
	}
	.ying-zhang{
		width: calc(100% - 40rpx);
		height: 120rpx;
		background-color: blue;
	}
	.invoice-image-up{
		width: 700rpx;
		height: 320rpx;
	}
	.invoice-image{
		width:700rpx;		
		height: 180rpx;
	}
.wrap {
	margin: 20upx;
}
$div-table-border-color: #666;
$div-table-border-width: 1upx;

.div-table {
	font-size: 18rpx;
	display: table;
	width: calc(100% - 40rpx);;
	height: 100%;
	border: $div-table-border-width solid $div-table-border-color;
	box-sizing: border-box;
	table-layout: auto;
	position: relative;
	.celspan {
		display: table;
		width: 100%;
		height: 100%;
		.td {
			display: table-cell;
			border: none !important;
		}
		.td + .td {
			border-left: $div-table-border-width solid $div-table-border-color !important;
		}
	}
	.rowspan {
		display: table;
		width: 100%;
		height: 100%;
		.tr {
			display: table-row;
			border: none !important;
		}
	}

	&.fixed-thead {
		.tbody,
		.thead,
		.tr,
		.th,
		.td {
			display: block;
		}
		.tr,
		.th {
			&:after {
				content: '';
				display: block;
				visibility: hidden;
				clear: both;
				height: 0;
			}
		}
		.td {
			float: left;
			width: 33.33%;
		}
		.tbody {
			height: 400upx;
			overflow-y: auto;
			overflow-x: hidden;
		}
	}

	.tr,
	.th {
		display: table-row;
		& + .tr,
		& + .th {
			.td,
			.th {
				border-top: $div-table-border-width solid $div-table-border-color;
				word-break: break-word;
			}
		}
	}
	.rowspan {
		.tr,
		.th {
			display: table-row;
			.td,
			.th {
				border: none;
			}
			& + .tr,
			& + .th {
				.td,
				.th {
					border-top: $div-table-border-width solid $div-table-border-color;
				}
			}
		}
	}
	.td {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		box-sizing: border-box;
		padding: 10upx;
		&.noPadding {
			padding: 0;
		}
		& + .td {
			border-left: $div-table-border-width solid $div-table-border-color;
		}
	}
	.th .td {
		font-weight: bold;		
	}
	.tbody {
		display: table-row-group;
	}
	.thead {
		display: table-header-group;
		.tr,
		.th {
			.td,
			.th {
				border-bottom: $div-table-border-width solid $div-table-border-color;
			}
		}
	}
	.tfoot {
		display: table-footer-group;
		.tr,
		.th {
			.td,
			.th {
				border-top: $div-table-border-width solid $div-table-border-color;
			}
		}
	}
	.colgroup {
		display: table-column-group;
	}
	.col {
		display: table-column;
	}
	.caption {
		display: table-caption;
	}
}
</style>

